<template name="admin">
	<section class="page-container page-home page-static page-settings">
		{{#with group}}
			{{#header sectionName=i18nLabel buttons=true}}
				<div class="rc-header__section-button">
					{{#if hasChanges}}
						<button class="rc-button rc-button--cancel discard"><span>{{_ "Cancel"}}</span></button>
					{{/if}}
					<button class="rc-button rc-button--primary save" disabled="{{not hasChanges}}"><span>{{_ "Save_changes"}}</span></button>
					{{#if $eq _id 'OAuth'}}
						<button class="rc-button rc-button--secondary refresh-oauth"><span>{{_ "Refresh_oauth_services"}}</span></button>
						<button class="rc-button rc-button--secondary add-custom-oauth"><span>{{_ "Add_custom_oauth"}}</span></button>
					{{/if}}
					{{#if $eq _id 'Assets'}}
						<button class="rc-button rc-button--secondary refresh-clients"><span>{{_ "Apply_and_refresh_all_clients"}}</span></button>
					{{/if}}
				</div>
			{{/header}}
			<div class="content">
				{{#unless hasPermission 'view-privileged-setting'}}
					<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
				{{else}}
					{{#if description}}
						<div class="info">
							<p class="settings-description">{{description}}</p>
						</div>
					{{/if}}
					<div class="rocket-form">
						{{#each sections}}
							<div class="section {{#if section}}section-collapsed{{/if}}">
								{{#if section}}
									<div class="section-title expand">
										<div class="section-title-text">
											{{translateSection section}}
										</div>
										<div class="section-title-right">
											<button class="rc-button rc-button--nude"><i class="icon-angle-down"></i></button>
										</div>
									</div>
								{{/if}}
								<div class="section-content border-component-color">
									{{#if section}}
										{{#if sectionIsCustomOAuth section}}
											<div class="section-helper">
												{{#with callbackURL section}}
													{{{_ "Custom_oauth_helper" .}}}
												{{/with}}
											</div>
										{{/if}}
									{{/if}}
									{{#each settings}}
										<div class="input-line double-col {{#if isSettingChanged _id}}setting-changed{{/if}}" {{isDisabled}}>
											<label class="setting-label" title="{{_id}}">{{label}}</label>
											<div class="setting-field">
												{{#if $eq type 'string'}}
													{{#if multiline}}
														<textarea class="input-monitor rc-input__element" name="{{_id}}" rows="4" style="height: auto" {{isDisabled}} {{isReadonly}}>{{value}}</textarea>
													{{else}}
														<input class="input-monitor rc-input__element" type="text" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}} {{isReadonly}} {{canAutocomplete}}/>
													{{/if}}
												{{/if}}

												{{#if $eq type 'relativeUrl'}}
													<input class="input-monitor rc-input__element" type="text" name="{{_id}}" value="{{relativeUrl value}}" placeholder="{{placeholder}}" {{isDisabled}} {{isReadonly}} {{canAutocomplete}}/>
												{{/if}}

												{{#if $eq type 'password'}}
													<input class="input-monitor rc-input__element" type="password" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}} {{isReadonly}} {{canAutocomplete}}/>
												{{/if}}

												{{#if $eq type 'int'}}
													<input class="input-monitor rc-input__element" type="number" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}} {{isReadonly}} {{canAutocomplete}}/>
												{{/if}}

												{{#if $eq type 'boolean'}}
													<label><input class="input-monitor" type="radio" name="{{_id}}" value="1" checked="{{$eq value true}}" {{isDisabled}} {{isReadonly}} {{canAutocomplete}}/> {{_ "True"}}</label>
													<label><input class="input-monitor" type="radio" name="{{_id}}" value="0" checked="{{$eq value false}}" {{isDisabled}} {{isReadonly}} {{canAutocomplete}}/> {{_ "False"}}</label>
												{{/if}}

												{{#if $eq type 'select'}}
													<div class="rc-select">
														<select class="input-monitor rc-select__element" name="{{_id}}" {{isDisabled}} {{isReadonly}}>
															{{#each values}}
																<option value="{{key}}" selected="{{selectedOption ../_id key}}">{{_ i18nLabel}}</option>
															{{/each}}
														</select>
														{{> icon block="rc-select__arrow" icon="arrow-down" }}
													</div>
												{{/if}}

												{{#if $eq type 'language'}}
													<div class="rc-select">
														<select class="input-monitor rc-select__element" name="{{_id}}" {{isDisabled}} {{isReadonly}}>
															{{#each languages}}
															<option value="{{key}}" selected="{{isAppLanguage key}}" dir="auto">{{name}}</option>
															{{/each}}
														</select>
														{{> icon block="rc-select__arrow" icon="arrow-down" }}
													</div>
												{{/if}}

												{{#if $eq type 'color'}}
													<div class="horizontal">
														{{#if $eq editor 'color'}}
															<div class="flex-grow-1">
																<input class="input-monitor rc-input__element colorpicker-input" type="text" name="{{_id}}" value="{{value}}" autocomplete="off" {{isDisabled}}/>
																<span class="colorpicker-swatch border-component-color" style="background-color: {{value}}"></span>
															</div>
														{{/if}}
														{{#if $eq editor 'expression'}}
															<div class="flex-grow-1">
																<input class="input-monitor rc-input__element" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}} {{canAutocomplete}}/>
															</div>
														{{/if}}
														<div class="color-editor ">
															<select name="color-editor">
																{{#each allowedTypes}}
																	<option value="{{.}}" selected="{{$eq ../editor .}}">{{_ .}}</option>
																{{/each}}
															</select>
														</div>
													</div>
													<div class="settings-description">Variable name: {{getColorVariable _id}}</div>
												{{/if}}

												{{#if $eq type 'font'}}
													<input class="input-monitor rc-input__element" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}} {{isReadonly}} {{canAutocomplete}}/>
												{{/if}}

												{{#if $eq type 'code'}}
													{{#if isDisabled.disabled}}
														{{> CodeMirror name=_id options=(getEditorOptions true) code=(i18nDefaultValue) }}
													{{else}}
														<div class="code-mirror-box" data-editor-id="{{_id}}">
															<div class="title">
																{{label}}
															</div>
															{{> CodeMirror name=_id options=getEditorOptions code=value }}
															{{setEditorOnBlur _id}}
															<div class="buttons">
																<button class="rc-button rc-button--primary button-fullscreen">{{_ "Full_Screen"}}</button>
																<button class="rc-button rc-button--primary button-restore">{{_ "Exit_Full_Screen"}}</button>
															</div>
														</div>
													{{/if}}
												{{/if}}

												{{#if $eq type 'action'}}
													{{#if hasChanges section}}
														<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span>
													{{else}}
														<button type="button" class="rc-button rc-button--primary action" data-setting="{{_id}}" data-action="{{value}}" {{isDisabled}} >{{_ actionText}}</button>
													{{/if}}
												{{/if}}

												{{#if $eq type 'asset'}}
													{{#if value.url}}
														<div class="settings-file-preview">
															<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div>
															<div class="action">
																<button type="button" class="rc-button rc-button--cancel delete-asset"><i class="icon-trash"></i>{{_ 'Delete'}}</button>
															</div>
														</div>
													{{else}}
														<div class="settings-file-preview">
															<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload"></i></div>
															<div class="action">
																<div class="rc-button rc-button--primary">{{_ 'Select_file'}}
																	<input type="file" accept="{{assetAccept fileConstraints}}" />
																</div>
															</div>
														</div>
													{{/if}}
												{{/if}}

												{{#if $eq type 'roomPick'}}
													<div>
														{{> inputAutocomplete settings=autocompleteRoom id=_id name=_id class="search autocomplete rc-input__element" autocomplete="off" disabled=isDisabled.disabled}}
														<ul class="selected-rooms">
															{{#each selectedRooms}}
																<li class="remove-room" data-setting={{../_id}}>{{name}} <i class="icon-cancel"></i></li>
															{{/each}}
														</ul>
													</div>
												{{/if}}

												{{#if description}}
													<div class="settings-description secondary-font-color">{{{RocketChatMarkdownUnescape description}}}</div>
												{{/if}}
												{{#if alert}}
													<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention"></i>{{{_ alert}}}</div>
												{{/if}}
											</div>
											{{#if showResetButton}}
												<button text="{{_ 'Reset'}}" data-setting="{{_id}}" class="reset-setting rc-button rc-button--cancel">
													<i class="icon-ccw color-error-contrast"></i>
												</button>
											{{/if}}
										</div>
									{{/each}}

									{{#unless $eq ../_id 'Assets'}}
										<div class="input-line double-col">
											<label class="setting-label">{{_ "Reset_section_settings"}}</label>
											<div class="setting-field">
												<button data-section="{{section}}" class="reset-group rc-button rc-button--cancel">
													{{_ "Reset"}}
												</button>
											</div>
										</div>
									{{/unless}}

									{{#if section}}
										{{#if sectionIsCustomOAuth section}}
											<div class="submit">
												<button class="rc-button rc-button--cancel remove-custom-oauth"><span>{{_ "Remove_custom_oauth"}}</span></button>
											</div>
										{{/if}}
									{{/if}}
								</div>
							</div>
						{{/each}}
					</div>
				{{/unless}}
			</div>
			{{/with}}
		</section>
</template>
